<template>
  <el-form
      ref="formDataRef"
      :model="formData"
      :rules="formValidRules"
      style="width:100%"
      label-position="top">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="菜单名称" prop="name"
                      :rules="[
        {
          required: true,
          message: '请输入菜单名称',
          trigger: 'blur',
        }
      ]">
          <el-input v-model="formData.name" :disabled="readOnly"/>
        </el-form-item>
      </el-col>


      <el-col :span="12">
        <el-form-item label="上级菜单" prop="parentId"
                      :rules="[
        {
          required: true,
          message: '请选择上级菜单',
          trigger: 'change',
        }]">
          <FormMenuSelect v-model:value="formData.parentId"
                          v-model:permissionScope="formData.permissionScope"
                          :disabled="readOnly"></FormMenuSelect>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="菜单类型" prop="type" :rules="[
        {
          required: true,
          message: '请选择菜单类型',
          trigger: 'change',
        }]">
          <FormDictRadio v-model:value="formData.type" dictType="menu_type"></FormDictRadio>
        </el-form-item>
      </el-col>

      <el-col :span="12" v-if="formData.type==='1'">
        <el-form-item label="路由类型" prop="routerType" :rules="[
        {
          required: true,
          message: '请选择路由类型',
          trigger: 'change',
        }]">
          <FormDictRadio v-model:value="formData.routerType" dictType="router_type"></FormDictRadio>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type==='3'">
        <el-form-item label="大屏类型" prop="screenType" :rules="[
        {
          required: true,
          message: '请选择大屏类型',
          trigger: 'change',
        }]">
          <FormDictRadio v-model:value="formData.screenType" dictType="screen_type"></FormDictRadio>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type==='3'">
        <el-form-item label="大屏路由方式" prop="screenRouterType" :rules="[
        {
          required: true,
          message: '请选择大屏路由方式',
          trigger: 'change',
        }]">
          <FormDictRadio v-model:value="formData.screenRouterType" dictType="screen_router_type"></FormDictRadio>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type==='1'||formData.type==='3'">
        <el-form-item label="菜单URL" prop="path">
          <el-input v-model="formData.path" :disabled="readOnly"/>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type==='2'">
        <el-form-item label="权限标识" prop="checkCode"
                      :rules="[
        {
          required: true,
          message: '请输入权限标识',
          trigger: 'blur',
        }]">
          <el-input v-model="formData.checkCode" :disabled="readOnly"/>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type==='1'||formData.type==='3'">
        <el-form-item label="图标" prop="icon">
          <FormIconSelect v-model:value="formData.icon"></FormIconSelect>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="formData.type==='1'||formData.type==='3'">
        <el-form-item label="加载文件" prop="componentFile">
          <el-input v-model="formData.componentFile" :disabled="readOnly"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="排序" prop="sort"
                      :rules="[
        {
          required: true,
          message: '请输入菜单排序',
          trigger: 'blur',
        }]">
          <el-input-number v-model="formData.sort" controls-position="right"
                           :disabled="readOnly" :min="0" :max="50"/>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup>
// @ts-ignore
import {getCurrentInstance, onMounted, reactive, ref} from 'vue'
// @ts-ignore
import {ElMessage, FormInstance, FormRules} from 'element-plus'
//定义组件名称
defineOptions({
  name: "MenuEdit"
})

//接收的参数
const props = defineProps({
  params: {required: false, type: Object, default: {}},
  readOnly: {type: Boolean, required: false, default: false}
});

interface Modal {
  name: string,
  path?: string,
  parentId: string,
  icon: string,
  sort: number,
  componentFile: string,
  checkCode?: string,
  type: string,
  permissionScope: string,
  routerType: string,
  screenType: string,
  screenRouterType: string,

}

const formDataRef = ref<FormInstance>()

// @ts-ignore
const {proxy} = getCurrentInstance()

// 表单 数据
// @ts-ignore
let formData = ref<Modal>({type: '1', sort: 0, routerType: 'main_route', screenType: 'me', screenRouterType: '_blank'})

const checkComponentFile = async (rule: any, value: any, callback: any) => {
  if (formData.value.path) {
    if (!value) {
      callback('请输入需要加载的菜单文件');
    }
  }
  callback();
};
// 表单 验证
let formValidRules = reactive<FormRules>({
  // componentFile: [{validator: checkComponentFile, trigger: 'blur'}]
});

onMounted(() => {
  if (props.params.id) {
    proxy.$http.post('/user-center/menu/findOne', {id: props.params.id}).then(function (api: any) {
      if (api.code == 0) {
        formData.value = api.data;
      }
    });
  }
})

/**
 * 按钮点击事件
 * @param btnType  按钮类型
 * @param params   参数
 * @param rootContext 弹窗父页面
 * @param modelContext  弹窗窗口
 */
const clickEvent = (btnType: string, params: any, rootContext: any, modelContext: any) => {
  switch (btnType) {
    case 'submit':
      // @ts-ignore
      formDataRef.value?.validate((valid: any, fields: any) => {
        if (valid) {
          proxy.$http.post('/user-center/menu/save', formData.value).then(function (api: any) {
            if (api.code == 0) {
              rootContext.$refs.defaultTable.reloadTable({});
              ElMessage({
                message: '操作成功',
                type: 'success',
              })
              modelContext.closeModal();
            } else {
              ElMessage({
                message: '操作失败',
                type: 'error',
              })
            }
          });
        }
      })
      break;
    case 'reset':
      // @ts-ignore
      formData.value = {}
      formDataRef.value?.resetFields();
      break;
  }
}
defineExpose({
  clickEvent
});
</script>
